<template>
    <el-card class="password-card" shadow="hover">
        <div class="password-title">
            <h3>修改密码</h3>
        </div>
        <el-form :model="passwordForm" :rules="rules" ref="passwordFormRef" label-width="120px" size="large">
            <el-form-item label="新密码">
                <el-input v-model="passwordForm.oldPassword" placeholder="请输入新密码" show-password></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
                <el-input v-model="passwordForm.newPassword" placeholder="请输入新密码" show-password></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
                <el-input v-model="passwordForm.confirmPassword" placeholder="请再次输入新密码" show-password></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="submitForm">确认修改</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script setup>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import userApi from "@/api/userApi";
import router from "@/router";

const passwordForm = ref({
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
});

// 校验
const validateConfirmPassword = (rule, value, callback) => {
    if (value != passwordForm.value.newPassword) {
        callback(new Error("两次输入的密码不一致"));
    } else {
        callback();
    }
};

const rules = {
    newPassword: [
        { required: true, message: "请输入新密码", trigger: "blur" },
        { min: 6, message: "密码长度不能少于 6 位", trigger: "blur" },
    ],
    confirmPassword: [
        { required: true, message: "请确认新密码", trigger: "blur" },
        { validator: validateConfirmPassword, trigger: "blur" },
    ],
};

const passwordFormRef = ref(null);

const submitForm = () => {
    passwordFormRef.value.validate((valid) => {
        if (valid) {
            let id = sessionStorage.getItem("userInfoUserId");
            userApi.upPassword(id, passwordForm.value.oldPassword, passwordForm.value.newPassword, passwordForm.value.confirmPassword)
                .then(resp => {
                    if (resp.code === 10000) {
                        ElMessage.success(resp.msg);
                        passwordForm.value = {
                            oldPassword: '',
                            newPassword: '',
                            confirmPassword: ''
                        };
                        router.push('/login');
                        sessionStorage.removeItem('token');
                    } else {
                        ElMessage.error(resp.msg);
                    }
                });
        } else {
            ElMessage.error("请重新检查密码");
        }
    });
};

</script>

<style scoped>
.password-card {
    width: 400px;
    margin: 0 auto;
    padding: 30px;
    text-align: center;
}

.password-title {
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: bold;
}

.el-form-item {
    margin-bottom: 20px;
}
</style>